<template>
  <ContentField>
    <div class="card-body">
      <table class="table custom-table" style="margin-top: 20px">
        <thead>
          <tr>
            <th class="col-2 animate__animated animate__bounceInDown th-title">蓝色方</th>
            <th class="col-2 animate__animated animate__bounceInDown th-title">红色方</th>
            <th class="col-2 animate__animated animate__bounceInDown th-title">对战结果</th>
            <th class="col-3 animate__animated animate__bounceInDown th-title">对战时间</th>
            <th class="col-2 animate__animated animate__bounceInDown th-title">操作</th>
          </tr>
        </thead>
        <tbody class="animate__animated animate__bounceInUp">
          <tr
            v-for="record in records"
            :key="record.record.id"
            class="selected-row animate__animated animate__fadeIn">
            <td>
              <div class="record-name">
                <img
                  :src="record.a_photo + '?random=' + Math.random()"
                  alt=""
                  class="record-user-photo" />
                &nbsp;
                <span class="record-user-username">{{ record.a_username }}</span>
              </div>
            </td>
            <td>
              <div class="record-name">
                <img
                  :src="record.b_photo + '?random=' + Math.random()"
                  alt=""
                  class="record-user-photo" />
                &nbsp;
                <span class="record-user-username">{{ record.b_username }}</span>
              </div>
            </td>
            <td>
              <span>{{ record.result }}</span>
            </td>
            <td>
              <span>{{ record.record.createtime }}</span>
            </td>
            <td>
              <button
                @click="open_record_content(record.record.id)"
                type="button"
                class="btn btn-outline-info">
                录像回放
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <nav
      aria-label="..."
      class="nav-pagination animate__animated animate__bounceInUp"
      style="margin-right: 1vw">
      <ul class="pagination">
        <li class="page-item" @click="click_page(-2)">
          <a class="page-link" href="#">上一页</a>
        </li>
        <li
          :class="['page-item', page.is_active]"
          v-for="page in pages"
          :key="page.number"
          @click="click_page(page.number)">
          <a class="page-link" href="#">{{ page.number }}</a>
        </li>
        <li class="page-item" @click="click_page(-1)">
          <a class="page-link" href="#">下一页</a>
        </li>
      </ul>
    </nav>
  </ContentField>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { ref } from "vue";
import $ from "jquery";
import router from "@/router/index";

export default {
  components: {
    ContentField,
  },
  setup() {
    const store = useStore();
    let records = ref([]);
    let current_page = 1;
    let total_records = 0;
    let pages = ref([]);

    const click_page = (page) => {
      if (page === -2) page = current_page - 1;
      else if (page === -1) page = current_page + 1;
      let max_pages = parseInt(Math.ceil(total_records / 8));
      if (page >= 1 && page <= max_pages) {
        pull_page(page);
      }
    };

    const update_pages = () => {
      let max_pages = parseInt(Math.ceil(total_records / 8));
      let new_pages = [];
      for (let i = current_page - 2; i <= current_page + 2; i++) {
        if (i >= 1 && i <= max_pages) {
          new_pages.push({
            number: i,
            is_active: i === current_page ? "active" : "",
          });
        }
      }
      pages.value = new_pages;
    };

    const pull_page = (page) => {
      current_page = page;
      $.ajax({
        url: "http://127.0.0.1:3000/record/getlist/",
        type: "get",
        headers: {
          Authorization: "Bearer " + store.state.user.token,
        },
        data: {
          page,
        },
        success(resp) {
          records.value = resp.records;
          console.log("records.value=====" + records.value);
          total_records = resp.records_count;
          console.log(total_records);
          update_pages();
        },
        error(resp) {
          console.log(resp);
        },
      });
    };

    pull_page(current_page);

    const stringTo2D = (map) => {
      let g = [];
      for (let i = 0, k = 0; i < 13; i++) {
        let line = [];
        for (let j = 0; j < 14; j++, k++) {
          if (map[k] == "0") line.push(0);
          else line.push(1);
        }
        g.push(line);
      }
      return g;
    };

    const open_record_content = (recordId) => {
      for (const record of records.value) {
        if (record.record.id === recordId) {
          store.commit("updateIsRecord", true);
          store.commit("updateGame", {
            map: stringTo2D(record.record.map),
            a_id: record.record.aid,
            a_sx: record.record.asx,
            a_sy: record.record.asy,
            b_id: record.record.bid,
            b_sx: record.record.asx,
            b_sy: record.record.asy,
          });
          store.commit("updateSteps", {
            a_steps: record.record.asteps,
            b_steps: record.record.bsteps,
          });
          store.commit("updateRecordLoser", record.record.loser);
          router.push({
            name: "record_content",
            params: {
              recordId,
            },
          });
          break;
        }
      }
    };

    return {
      records,
      open_record_content,
      pages,
      click_page,
    };
  },
};
</script>

<style scoped>
img.record-user-photo {
  width: 4vh;
  border-radius: 50%;
}

.custom-table {
  background-color: transparent;
  color: white;
  /* border: 2px solid rgb(13, 202, 240); */
  border-collapse: separate;
  border-spacing: 0;
}

.custom-table th,
.custom-table td {
  border: 0px solid rgb(255, 255, 255);
  text-align: center;
  padding: 8px;
}

.custom-table {
  color: rgb(255, 255, 255);
}

.selected-row {
  height: 3vh;
}

.selected-row:hover {
  color: rgb(13, 202, 240);
  background-color: rgba(50, 50, 50, 0.35);
  animation: shake 0.5s;
}

@keyframes shake {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

button.btn:hover {
  color: white;
  animation: shake 0.5s;
}

@keyframes shake {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.nav-pagination {
  position: fixed;
  bottom: 8vh; /* 调整距离底部的距离 */
  right: 10vw; /* 调整距离右侧的距离 */
}

.pagination {
  float: right;
}

.page-item {
  border: 1px solid rgb(13, 202, 240);
}

.page-link {
  background-color: transparent;
  color: rgb(13, 202, 240);
  border: none;
}

.page-item.active {
  background-color: rgb(13, 202, 240);
}

.page-item.active .page-link {
  color: white;
}

.th-title {
  color: rgb(13, 202, 240);
}

.record-name {
  margin-left: 28%;
  text-align: left;
}
</style>
